<template>
    <div>
        <Search></Search>
        <!-- 配置异步组件 当异步组件没有加载完成的时候可以在通过插槽设置 加载状态.. -->
        <Suspense>
            <AsyncCom></AsyncCom>
            <template v-slot:fallback>
                <em>正在努力加载....</em>
            </template>
        </Suspense>
        <!-- 组件绑定v-model 它就是 props传值和反向传值的 简写-->
        <!-- <ModelDemo :money="money" @add-money="money=$event"></ModelDemo> -->
        <!-- :money="money" @update:money -->
        <ModelDemo v-model:money="money"></ModelDemo>
        <button @click="showfather=!showfather">显示隐藏father</button>
        <Father v-if="showfather"></Father>
    </div>
</template>

<script>
    import Search from './components/search/Search.vue'
    import ModelDemo from './components/ModelDemo.vue'
    import Father from './components/Father.vue'
    import {defineAsyncComponent} from 'vue'
    export default {
        data(){
            return {
                showcomponent:false,
                money:"一个亿",
                showfather:false
            }
        },
        components:{
            Search,ModelDemo,Father,
            AsyncCom:defineAsyncComponent(()=>{
                return new Promise((resolve)=>{
                    setTimeout(()=>{
                        resolve(import("./components/AsyncCom.vue"))
                    },2000)
                })
            })
        }
    }
</script>
<style lang="scss" scoped>
:deep(h3){
    color:red;
}
</style>